<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Speed Dial | Onsen UI</title>
  <link rel="stylesheet" href="../styles/app.css"/>
  <link rel="stylesheet" href="../../../../build/css/onsenui.css">
  <link rel="stylesheet" href="../../../../build/css/onsen-css-components.css">
  <link rel="stylesheet" href="../../../../build/css/font_awesome/css/font-awesome.min.css">

  <script src="../../../../build/js/onsenui.js"></script>
  <script src="../../node_modules/angular/angular.js"></script>
  <script src="../../dist/angularjs-onsenui.js"></script>
  <script>
    ons.bootstrap();
  </script>

</head>

<body>
  <ons-page modifier="material">
    <ons-toolbar modifier="material">
      <div class="center">Speed Dial</div>
    </ons-toolbar>

    <ons-speed-dial var="speedDial" ons-open="console.log('open')" ons-close="console.log('close')" position="bottom right" direction="up">
      <ons-fab>
        <ons-icon icon="md-car"></ons-icon>
      </ons-fab>
      <ons-speed-dial-item ng-click="speedDial.hideItems()">C</ons-speed-dial-item>
      <ons-speed-dial-item ng-click="speedDial.hideItems()">B</ons-speed-dial-item>
      <ons-speed-dial-item ng-click="speedDial.hideItems()">A</ons-speed-dial-item>
    </ons-speed-dial>
  </ons-page>
</body>
</html>
